<!-- 操作日志 -->
<template>
  <div>
    <div>
      <!-- 搜索部分 -->
      <el-input
        clearable
        v-model.trim="configReq.targetAdminId"
        @keyup.enter="getInfo"
        style="width: 200px; margin-right: 15px"
        placeholder="请输入管理ID"
      />
      <el-button type="primary" :icon="Search" @click="debounce(getInfo)"
        >查找</el-button
      >
    </div>
    <div style="margin-top: 20px">
      <!-- 列表 -->
      <el-table :data="infoList" border>
        <el-table-column prop="id" label="日志ID" width="180" />
        <el-table-column prop="adminId" label="管理员ID" width="180" />
        <el-table-column prop="requestId" label="请求ID" />
        <el-table-column prop="group" label="API分组" />
        <el-table-column prop="method" label="请求ID" />
        <el-table-column label="操作时间">
          <template #default="scope">
            {{ new Date(scope.row.gmtCreate).computeDate() }}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="margin: 20px 0px">
      <!-- 分页组件 -->
      <paging v-bind="pageInfo" @changeReq="changeConfig"></paging>
    </div>
  </div>
</template>

<script>
import { post } from "@/utils/http";
import { Search } from "@element-plus/icons-vue";
import Paging from "@/components/paging/Paging";
export default {
  setup() {
    return {
      Search, //属性不用注册
    };
  },
  components: { Paging },
  data() {
    return {
      infoList: [], //数据列表
      // 请求表格数据的配置
      configReq: {
        _gp: "admin.log",
        _mt: "list",
        targetAdminId: "", //管理员id
        page: 1,
        limit: 20,
      },
      // 传给分页组件的数据
      pageInfo: {
        page: 1, //跳转页数
        limit: 20, //显示条数
        total: 0,
      },
    };
  },
  methods: {
    // 获取数据的方法
    getInfo() {
      post(this.configReq)
        .then((res) => {
          if (200 == res.errno) {
            //成功状态码
            // console.log(res);
            this.infoList = res.data.items; //获取表格信息
            this.pageInfo.total = res.data.total; //获取总条数
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 组件触发的数据改变
    changeConfig(data) {
      Object.assign(this.configReq, data);
      this.getInfo();
    },
  },
  created() {
    this.getInfo();
  },
};
</script>

<style></style>
